<template>
  <div>
    <el-card>
      <div class="aggregate-header">
        <el-select v-model="selectedFeeType" placeholder="选择费用类型" style="width: 180px; margin-right: 16px;">
          <el-option v-for="item in feeTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-date-picker v-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 300px;" />
        <el-button type="primary" @click="fetchAggregate">筛选</el-button>
      </div>
      <el-table :data="aggregateList" style="width: 100%; margin-top: 16px;">
        <el-table-column prop="feeType" label="费用类型" :formatter="formatFeeType" />
        <el-table-column prop="feeId" label="费用ID" />
        <el-table-column prop="reminderType" label="类型" :formatter="formatReminderType" />
        <el-table-column prop="reminderContent" label="内容" />
        <el-table-column prop="reminderTime" label="记录时间" />
        <el-table-column prop="nextDueDate" label="下次到期日" />
        <el-table-column prop="nextAmount" label="下次应缴金额" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column label="操作" v-if="canEdit">
          <template #default="scope">
            <el-button size="mini" @click="viewDetail(scope.row)">详情</el-button>
            <el-button size="mini" type="primary" @click="editReminder(scope.row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <ReminderRecordDialog
        v-model:visible="dialogVisible"
        :feeId="editData?.feeId"
        :feeType="editData?.feeType"
        :editData="editData"
        @refresh="fetchAggregate"
      />
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { REMINDER_TYPE_MAP, FEE_TYPE_OPTIONS } from '@/constants/enums';
import ReminderRecordDialog from './ReminderRecordDialog.vue';
import { getAggregateReminderRecords } from '@/api/propertyFee';

const props = defineProps<{ feeIds: number[]; canEdit: boolean }>();
const selectedFeeType = ref<number | undefined>(undefined);
const dateRange = ref<[string, string] | undefined>(undefined);
const aggregateList = ref<any[]>([]);
const dialogVisible = ref(false);
const editData = ref<any>(null);
const feeTypeOptions = FEE_TYPE_OPTIONS;

function formatFeeType(type: number) {
  const opt = feeTypeOptions.find(item => item.value === type);
  return opt ? opt.label : '-';
}
function formatReminderType(row) {
  return REMINDER_TYPE_MAP[row.reminderType] || '-';
}
function viewDetail(row) {
  // 可用el-drawer或el-dialog展示详情
}
function editReminder(row) {
  editData.value = row;
  dialogVisible.value = true;
}
async function fetchAggregate() {
  aggregateList.value = await getAggregateReminderRecords({ feeIds: props.feeIds, feeType: selectedFeeType.value, dateRange: dateRange.value });
}
</script>

<style scoped>
.aggregate-header { display: flex; align-items: center; margin-bottom: 12px; }
</style> 